<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>等下班</title>
        <style type="text/css">
            .time{
                text-align: center;
                font-size: 80px;
                font-family: "Helvetica Neue";
                font-weight: 800;
            }
            .img{
                text-align: center;
                vertical-align: top;
            }
            img{
                max-width: 100%;
            }
        </style>
	</head>
	<body>
        <div class="img">
            <img src="./img/u=2376619390,2407627054&fm=15&gp=0.jpg" alt="">
        </div>
        <div class="time">00:00:00</div>
        
        <script type="text/javascript">
			//cookie
			function addCookie(sName,sValue,iDay){
			    if(iDay){
			        var oDate = new Date();
			        oDate.setDate(oDate.getDate()+iDay);
			        document.cookie=sName+'='+sValue+'; PATH=/; EXPIRES='+oDate.toGMTString();
			    }else{
			        document.cookie=sName+'='+sValue+'; PATH=/';
			    }
			}
			
			function getCookie(sName){
			    var arr = document.cookie.split('; ');    
			    if(sName){
			        for(var i=0;i<arr.length;i++){
			            var arr2 = arr[i].split('=');        
			            if(arr2[0]==sName){
			                return arr2[1];
			            } 
			        }
					return null
			    }else{
			        var json={};
			        for(var i=0;i<arr.length;i++){
			            var arr2 = arr[i].split('=');
			            json[arr2[0]]=arr2[1];
			        } 
			        return json;
			    }
			}
			
			function removeCookie(sName){
			    addCookie(sName,1,-1);
			}
			
			let gotime=300;
			let usetime
			if(getCookie('time')){
				usetime=getCookie('time');
			}else{
				usetime=prompt('输入你的下班时间：', '18:00:00');
				usetime=usetime?usetime:'18:00:00';
				let save=confirm('是否保存下班时间？');
				if(save){
					addCookie('time',usetime,7)
				}
			}
            
            let xb=new Date()
            let uta=usetime.split(':')
            if(uta.length===3){
               xb.setHours(parseInt(uta[0]),parseInt(uta[1]),parseInt(uta[2]))
            }else{
                xb.setHours(18,0,0)
            }
            
            
            let now=new Date();
            let cd=parseInt((xb.getTime()-now.getTime())/1000);
            
            function todou(s){
                return s>=10?s:('0'+s)
            }
            
            function showTime(){
                if(cd<=0||now.getHours()<9){
                    document.querySelector('.time').innerText='下班啦！！！'
                    document.querySelector('.img img').src='./img/u=3558647110,4075174335&fm=26&gp=0.jpg'
                }else if(cd<=gotime&&cd>0){
                    document.querySelector('.img img').src='./img/20180311011136_4czdS.gif'
                }else{
                    let s=cd
                    let h=parseInt(s/3600)
                    s=s%3600
                    let m=parseInt(s/60)
                    s=s%60
                    document.querySelector('.time').innerText=`${todou(h)}:${todou(m)}:${todou(s)}`;
                }
            }
            
            showTime()
            let i=1000
            if(cd<=gotime){i=10}
            if(now.getHours()>=9){
                let ct=setInterval(function(){
                    cd=parseInt((xb.getTime()-new Date().getTime())/1000);
                    showTime()
                    if(cd<=0){
                        clearInterval(ct);
                    }
                    if(cd<=gotime&&cd>0){
                        document.querySelector('.img img').src='./img/20180311011136_4czdS.thumb.700_0.gif'
                        clearInterval(ct);
                        cd=cd*100
                        ct=setInterval(function(){
                            cd=parseInt((xb.getTime()-new Date().getTime())/1000);
                            let ms=cd
                            let m=parseInt(ms/6000)
                            ms=ms%6000
                            let s=parseInt(ms/100)
                            ms=ms%100
                            document.querySelector('.time').innerText=`${todou(m)}:${todou(s)}:${todou(ms)}`;
                            
                            if(cd<=0){
                                clearInterval(ct);
                            }
                        },10)
                    }
                },i)
            }
            
        </script>
	</body>
</html>
